<div class="fans">
    <div class="search-box" style="display: flex; justify-content: space-between;">
         <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
            <input [(ngModel)]="keyWords" style="height: 50px;" type="text" nz-input placeholder="search by name/email" />
        </nz-input-group>
        <ng-template #suffixButton>
            <button (click)="onSearch()" style="height: 50px;"  nz-button nzType="primary"><i nz-icon nzType="search"></i>Search</button>
        </ng-template>  
    </div>

    <nz-tabset style="width: 100%;" [nzTabPosition]="'top'" [nzType]="'card'" [nzSelectedIndex]=tabIndex >
        <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab.tabname">  
            <div [hidden]="'Following'!=tab.tabname">
                <div class="chatContent" *ngFor="let item of tabs[0].list">
                    <div class="speaker">
                        {{item.followName}}
                    </div>
                    <div class="dailog">
                        {{item.followEmail}}
                    </div>
                    <button (click)=onUnFollow(item.id) nz-button nzType="primary">-</button>
                </div>
            </div>
            <div [hidden]="'Followers'!=tab.tabname">
                <div class="chatContent" *ngFor="let item of tabs[1].list">
                    <div class="speaker">
                        {{item.followName}}
                    </div>
                    <div class="dailog">
                        {{item.followEmail}}
                    </div>
                </div>             
            </div>
            <div [hidden]="'Search'!=tab.tabname">
                <div class="chatContent" *ngFor="let item of tabs[2].list">
                    <div class="speaker">
                        {{item.userName}}
                    </div>
                    <div class="dailog">
                        {{item.email}}
                    </div>
                    <button (click)=onFollow(item.userId) nz-button nzType="primary">+</button>
                </div>    
            </div>
        </nz-tab>
    </nz-tabset>
</div>